// 瀑布流
$(function() {
    $("#gallery-wrapper").pinterest_grid({
        // 控制左右放多少个
        no_columns: 3,
        padding_x: 35,
        padding_y: 10,
        margin_bottom: 50,
        single_column_breakpoint: 700
    });


    // 点击刷新
    $('.refresh').click(function() {
        $.get('http://175.178.158.178:8956/show', function(alldata) {
            console.log(alldata.data);

            $('.title').html(`${alldata.data[0].orchardName}`)

            var num = 0;
            // 刷新一下，先清空原来的
            $("#gallery-wrapper").children().remove();

            $.each(alldata.data, function(i, ele) {
                // console.log(i); // 索引
                // console.log(ele); // 每一个元素

                // 虫的总数
                num = num + ele.pestNumber

                // 简化时间 "2022-05-24T16:00:00.000+00:00"
                pictime = alldata.data[i].shootingTime.split('T')
                pictime[1] = pictime[1].split('.')[0]
                pictime = `${pictime[0]} ${pictime[1]}`
                alldata.data[i].shootingTime = pictime

                // 动态添加
                var box = $(`
                <article class="white-panel">
                    <img src="http://${ele.picture}" class="thumb">
                    <h1>昆虫名称：<i>${ele.pestName}</i></h1>
                    <span>数量：<i>${ele.pestNumber}</i></span>
                    <span>装置ID：<i>${ele.deviceId}</i></span>
                    <span class="time">时间：<i>${ele.shootingTime}</i></span>
                </article>
                `)
                $("#gallery-wrapper").append(box).hide().slideDown(500);

            })

            $('.amount i').html(`${num}`)

        }, 'json')
    })

    // 打开页面先触发
    $('.refresh').click();
});